<template>
  <div class="applogin-box">
    <div class="login-box">
      <!-- 左侧区域 -->
      <div class="ename">Welcome</div>
      <div class="name">云车间管理系统</div>
      <!--右侧区域 -->
      <div class="login-form-box">
        <div class="login-title">登录</div>
        <a-form-model
          ref="ruleForm"
          :model="model"
          :rules="rules"
          :label-col="{ span: 0 }"
          :wrapper-col="{ span: 24 }"
        >
          <a-form-model-item prop="userName">
            <a-input v-model.trim="model.userName" placeholder="请输入账号">
              <a-icon slot="prefix" type="user" style="color:#B9BED1" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input
              type="password"
              v-model.trim="model.password"
              placeholder="请输入密码"
            >
              <a-icon slot="prefix" type="lock" style="color:#B9BED1" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 5, offset: 2 }">
            <a-checkbox v-model.trim="checked" @change="onChange">
              记住我
            </a-checkbox>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 24, offset: 0 }">
            <a-button type="primary" @click="handleSubmit">
              登录
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
    <div class="login-footer">
      <span class="line1">武汉华中数控股份有限公司版权所有</span>
      <span class="line2"
        ><a href="https://beian.miit.gov.cn/" target="_blank"
          >鄂ICP备12013633号-2</a
        ></span
      >
      <span class="line3"
        >技术支持：华中数控股份有限公司 (工业互联网事业部)</span
      >
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("menu/");
const { mapState } = createNamespacedHelpers("menu/");
import api from "@/api/apiServer";
export default {
  data() {
    return {
      model: {},
      checked: false, // 是否选中
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    document.title = "云车间管理系统";
    this.getLocal();
    this.keyupSubmit();
  },
  computed: {
    ...mapState(["menuLists", "firstMenuPath"]),
  },
  methods: {
    ...mapMutations(["setUserInfo", "saveMenuLists"]),
    // 登录接口
    async handleLogin() {
      if (this.checked == true) {
        //传入账号名，密码，和保存天数3个参数
        this.setLocal(this.model.userName, this.model.password, this.checked);
      } else {
        //清空Local
        this.clearLocal();
      }
      const res = await api.Login(this.model);
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        return;
      }
      this.setUserInfo(res.data);
      this.getMenu(res.data.id);
      localStorage.setItem("userInfo", JSON.stringify(res.data));
      localStorage.setItem("tokenName", res.data.tokenName);
      localStorage.setItem("tokenValue", res.data.tokenValue);
    },
    keyupSubmit() {
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        //!this.clickState是防止用户重复点击回车
        if (_key === 13 && !this.clickState) {
          this.handleSubmit();
        }
      };
    },
    // 获取当前用户权限菜单
    async getMenu(id) {
      const res = await api.UserResources({ id });
      localStorage.setItem("menuArr", JSON.stringify(res.data.treeList));
      this.saveMenuLists(res.data.treeList);
      this.$router.push({ path: this.firstMenuPath });
    },
    // 记住密码
    onChange() {},
    // 表单提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.handleLogin();
        } else {
          return false;
        }
      });
    },
    // 设置Local
    setLocal(userName, password, state) {
      localStorage.setItem("userName", userName);
      localStorage.setItem("password", password);
      localStorage.setItem("state", state);
    },
    //获取Local
    getLocal: function() {
      let userName = localStorage.getItem("userName");
      let password = localStorage.getItem("password");
      let state = localStorage.getItem("state");
      if (userName && password && state) {
        this.$set(this.model, "userName", userName);
        this.$set(this.model, "password", password);
        this.checked = Boolean(state);
      }
    },
    //删除Local
    clearLocal: function() {
      this.setLocal("", "", false); //修改2值都为空，天数为负1天就好了
    },
  },
};
</script>

<style scoped="scoped" lang="less">
@import "./style.less";
</style>
